import { EChartsOption } from 'echarts'
import echarts from '@/plugins/echarts'

const { t } = useI18n()

export const lineOptions: EChartsOption = {
  title: {
    text: t('analysis.monthlySales'),
    left: 'center'
  },
  xAxis: {
    data: [
      t('analysis.january'),
      t('analysis.february'),
      t('analysis.march'),
      t('analysis.april'),
      t('analysis.may'),
      t('analysis.june'),
      t('analysis.july'),
      t('analysis.august'),
      t('analysis.september'),
      t('analysis.october'),
      t('analysis.november'),
      t('analysis.december')
    ],
    boundaryGap: false,
    axisTick: {
      show: false
    }
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 80,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    padding: [5, 10]
  },
  yAxis: {
    axisTick: {
      show: false
    }
  },
  legend: {
    data: [t('analysis.estimate'), t('analysis.actual')],
    top: 50
  },
  series: [
    {
      name: t('analysis.estimate'),
      smooth: true,
      type: 'line',
      data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: t('analysis.actual'),
      smooth: true,
      type: 'line',
      itemStyle: {},
      data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ]
}

export const pieOptions: EChartsOption = {
  title: {
    text: '不同能力项得分占比',
    show: false,
    left: 'left',
    top: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    type: 'scroll',
    orient: 'horizontal',
    left: 'center',
    itemGap: 10,
    itemWidth: 10,
    itemHeight: 10,
    icon: 'circle'
  },
  color: [
    '#376DF7',
    '#53B997',
    '#6750AA',
    '#F8C541',
    '#294680',
    '#68B2FF',
    '#7A4388',
    '#E883B9',
    '#00827F',
    '#FF9B47'
  ],
  series: [
    {
      name: t('analysis.userAccessSource'),
      type: 'pie',
      radius: ['30%', '60%'],
      center: ['50%', '60%'],
      label: {
        position: 'outside',
        // "offset": 30,
        formatter: '{d}%',
        fontSize: 14
      },
      data: [
        { value: 16, name: '推理能力' },
        { value: 32, name: '问答能力' },
        { value: 23, name: '理解能力' },
        { value: 29, name: '综合能力' }
      ],
      labelLine: {
        // length: 10,
        // length2: 20,
        // smooth: 0.2
      }
    }
  ]
}

export const barOptions: EChartsOption = {
  title: {
    text: t('analysis.weeklyUserActivity'),
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 50,
    right: 20,
    bottom: 20
  },
  xAxis: {
    type: 'category',
    data: [
      t('analysis.monday'),
      t('analysis.tuesday'),
      t('analysis.wednesday'),
      t('analysis.thursday'),
      t('analysis.friday'),
      t('analysis.saturday'),
      t('analysis.sunday')
    ],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: t('analysis.activeQuantity'),
      data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
      type: 'bar'
    }
  ]
}

export const radarOption: EChartsOption = {
  legend: {
    show: false,
    data: ['一', '二', '三', '四', '五']
  },
  radar: {
    // shape: 'circle',

    axisLabel: { show: true },
    indicator: [
      {
        name: '指标一',
        max: 200
      },
      { name: '指标二', max: 200, axisLabel: { show: false } },
      { name: '指标三', max: 200, axisLabel: { show: false } },
      { name: '指标四', max: 200, axisLabel: { show: false } },
      { name: '指标五', max: 200, axisLabel: { show: false } }
    ],
    splitArea: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#D9D9D9',
        width: 1
      }
    }
  },
  color: [
    '#376DF7',
    '#53B997',
    '#6750AA',
    '#F8C541',
    '#294680',
    '#68B2FF',
    '#7A4388',
    '#E883B9',
    '#00827F',
    '#FF9B47'
  ],
  series: [
    {
      name: `xxx${t('workplace.index')}`,
      type: 'radar',
      symbol: 'emptyCircle',
      symbolSize: 4,
      data: [
        {
          value: [82, 91, 55, 77, 78, 153],
          name: '指标一'
        },
        {
          value: [114, 151, 172, 182, 140, 168],
          name: '指标二'
        },
        {
          value: [147, 105, 202, 125, 186, 149],
          name: '指标三'
        },
        {
          value: [128, 185, 136, 146, 122, 161],
          name: '指标四'
        },
        {
          value: [161, 175, 102, 66, 145, 122],
          name: '指标五'
        }
      ]
    }
  ]
}

export const wordOptions = {
  series: [
    {
      type: 'wordCloud',
      gridSize: 2,
      sizeRange: [12, 50],
      rotationRange: [-90, 90],
      shape: 'pentagon',
      width: 600,
      height: 400,
      drawOutOfBound: true,
      textStyle: {
        color: function () {
          return (
            'rgb(' +
            [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') +
            ')'
          )
        }
      },
      emphasis: {
        textStyle: {
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      data: [
        {
          name: 'Sam S Club',
          value: 10000,
          textStyle: {
            color: 'black'
          },
          emphasis: {
            textStyle: {
              color: 'red'
            }
          }
        },
        {
          name: 'Macys',
          value: 6181
        },
        {
          name: 'Amy Schumer',
          value: 4386
        },
        {
          name: 'Jurassic World',
          value: 4055
        },
        {
          name: 'Charter Communications',
          value: 2467
        },
        {
          name: 'Chick Fil A',
          value: 2244
        },
        {
          name: 'Planet Fitness',
          value: 1898
        },
        {
          name: 'Pitch Perfect',
          value: 1484
        },
        {
          name: 'Express',
          value: 1112
        },
        {
          name: 'Home',
          value: 965
        },
        {
          name: 'Johnny Depp',
          value: 847
        },
        {
          name: 'Lena Dunham',
          value: 582
        },
        {
          name: 'Lewis Hamilton',
          value: 555
        },
        {
          name: 'KXAN',
          value: 550
        },
        {
          name: 'Mary Ellen Mark',
          value: 462
        },
        {
          name: 'Farrah Abraham',
          value: 366
        },
        {
          name: 'Rita Ora',
          value: 360
        },
        {
          name: 'Serena Williams',
          value: 282
        },
        {
          name: 'NCAA baseball tournament',
          value: 273
        },
        {
          name: 'Point Break',
          value: 265
        }
      ]
    }
  ]
}

export const gaugeOptions = {
  series: [
    // 内侧刻度
    {
        type: "gauge",
        radius: "48%", // 位置
        center: ["50%", "70%"],
        min: 0,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        axisLine: {
            show: true,
            lineStyle: {
                // 轴线样式
                width: 42, // 宽度
                color: [
                    [0, '#02B5CA'],
                    [1, '#17C6C0']
                ] // 颜色
            },
            length: 20,
            distance: -18
        },
        axisTick: {
            // 刻度
            show: true,
            splitNumber: 4,
            length: 20,
            distance: -32,
            lineStyle: {
                color: '#ED7B2F',
                width: 2
            },
        },
        splitLine: {
            // 分割线
            show: false
        },
        axisLabel: {
            // 刻度标签
            show: false
        },
        pointer: {
            // 仪表盘指针
            show: false
        },
        detail: {
            // 仪表盘详情
            show: false
        }
    },
    
    // 中间白色半圆
    {
        type: "gauge",
        radius: "40%", // 位置
        center: ["50%", "70%"],
        min: 0,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        axisLine: {
            show: true,
            lineStyle: {
                // 轴线样式
                width: 300, // 宽度
                color: [
                    [
                        1, '#fff'
                    ]
                ], // 颜色
            }
        },
        axisTick: {
            // 刻度
            show: false
        },
        splitLine: {
            // 分割线
            show: false
        },
        axisLabel: {
            // 刻度标签
            show: false
        },
        pointer: {
            // 仪表盘指针
            show: false
        },
        detail: {
            // 仪表盘详情
            show: false
        }
    },
    // 内侧轴线
    {
        type: "gauge",
        radius: "40%", // 位置
        center: ["50%", "70%"],
        min: 0,
        max: 100,
        startAngle: 180,
        endAngle: 0,
        axisLine: {
            show: true,
            lineStyle: {
                // 轴线样式
                width: 40, // 宽度
                color: [
                    [0.5, '#ED7B2F'],
                    [1, '#ccf9fd']
                ], // 颜色

            }
        },
        pointer: {
            // 仪表盘指针
            show: false,
        },
        axisTick: {
            // 刻度
            show: false
        },
        splitLine: {
            // 分割线
            show: false
        },
        axisLabel: {
            // 刻度标签
            show: false
        },
        detail: {
            // 仪表盘详情
            show: false
        },
        title: {
          offsetCenter: [0, '-20%'],
          fontSize: 60,
          color: '#17C6C0'
        },
        data: [
          {
            value: 0.7,
            name: '50.00'
          }
        ]
    }
  ]
}
